<template>
	<div class="mcontaner">
		<Header></Header>
		<div class="block">
			<el-timeline>

				<el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs">
					<el-card>
						<h4>
							主题:
							<router-link :to="{name: 'BlogDetail', params: {blogId: blog.id}}">
								{{blog.title}}
							</router-link>
						</h4>
						<p>描述:{{blog.description}}</p>
						<p>作者:{{blog.username}}</p>
						<span v-show="hasDel">
							<el-button type="text" class="button" @click="del(blog.id)">删除</el-button>
						</span>
					</el-card>
				</el-timeline-item>

			</el-timeline>

			<el-pagination class="mpage" background layout="prev, pager, next" :current-page="currentPage" :page-size="pageSize"
			 :total="total" @current-change="page">
			</el-pagination>

		</div>

	</div>
</template>

<script>
	import Header from "../components/Header";

	export default {
		name: "Blogs.vue",
		components: {
			Header
		},
		data() {
			return {
				blogs: {},
				currentPage: 1,
				total: 0,
				pageSize: 5,
				username:null,
				role: {},
				hasDel:false,
			}
		},
		methods: {
			page(currentPage) {
				const _this = this
				_this.$axios.get("/blogs?currentPage=" + currentPage).then(res => {
					// console.log(res)
					_this.blogs = res.data.data.records
					_this.currentPage = res.data.data.current
					_this.total = res.data.data.total
					_this.pageSize = res.data.data.size
				})
			},
			del(blogId) {
				const _this = this
				_this.$axios.get('/blog/del/' + blogId, {
					headers: {
						"Authorization": localStorage.getItem("token")
					}
				}).then(res => {
					// console.log(res)
					this.page(1)
				})
			},
		},
		created() {
			this.page(1)
			if (this.$store.getters.getUser) {
				if(this.$store.getters.getUser.role!=null){
					this.role = this.$store.getters.getUser.role
					this.role.forEach((k)=>{
						k.permissions.forEach((v)=>{
							if(v.name == "del"){
								this.hasDel=true;
							}
						})
					})
				}
				
			}
		}
	}
</script>

<style scoped>
	.mpage {
		margin: 0 auto;
		text-align: center;
	}
</style>
